<template>
  <PageWrapper>
    <a-modal width="auto" v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>撤回账单</template>
      <div>撤回后，商户将无法查看该账单，确定撤回已送达账单？</div>
    </a-modal>
    <a-card :bordered="false" class="pt-3 mb-3 proCard">
      <BasicForm @register="register" @submit="handleSubmit" @advanced="actionRef.redoHeight()" />
    </a-card>
    <a-card :bordered="false" class="proCard">
      <BasicTable :columns="columns" :request="loadDataTable" row-key="id" ref="actionRef">
        <template #index="scoped">
          {{ scoped.rowIndex + 1 }}
        </template>
        <template #billType="{ record }">{{ billTypeLabel(record.billType) }}</template>
        <template #isHide="{ record }">{{ record.isHide == 1 ? '已撤回' : '已送达' }}</template>

        <template #actions="{ record }">
          <a-button
            @click="downloadBillHandle(record)"
            style="margin: 0 10px"
            type="primary"
            size="mini"
          >
            下载
          </a-button>
          <a-button
            style="margin: 0 10px"
            type="primary"
            size="mini"
            :disabled="record.isHide == 1"
            @click="hideHandle(record)"
          >
            撤回
          </a-button>
        </template>
        <template #toolbar>
          <a-button type="primary" @click="actionRef.reload()">刷新数据</a-button>
        </template>
      </BasicTable>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { getHistoryBillList, hideBillItem, downloadBill } from '@/api/business/history-bill';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { PageWrapper } from '@/components/Page';
  import { BasicColumn, BasicTable } from '@/components/Table';
  import { computed } from 'vue';
  import { ref } from 'vue';
  import { downloadByData } from '@/utils/file/download';
  const billTypeOptions = [
    {
      label: '美团蛋糕结算',
      value: 11,
    },
    {
      label: '美团蛋糕补单',
      value: 12,
    },
    {
      label: '抖音蛋糕结算',
      value: 13,
    },
    {
      label: '抖音蛋糕补单',
      value: 14,
    },
    {
      label: '快手蛋糕结算',
      value: 15,
    },
    {
      label: '快手蛋糕补单',
      value: 16,
    },
    {
      label: '小时达蛋糕结算',
      value: 17,
    },
    {
      label: '小时达蛋糕补单',
      value: 18,
    },
  ];
  const billTypeLabel = computed(() => {
    return (value) => {
      const obj = billTypeOptions.find((item) => item.value == value);
      return obj ? obj.label : '';
    };
  });
  const schemas: FormSchema[] = [
    {
      field: 'billType',
      component: 'Select',
      label: '账单类型',
      componentProps: {
        allowClear: true,
        placeholder: '请选择账单类型',
        options: billTypeOptions,
      },
    },
    {
      field: 'isHide',
      component: 'Select',
      label: '状态',
      componentProps: {
        allowClear: true,
        placeholder: '请选择状态',
        options: [
          {
            label: '已撤回',
            value: 1,
          },
          {
            label: '已送达',
            value: -1,
          },
        ],
      },
    },
    {
      field: 'userName',
      component: 'Input',
      label: '上传账号',
      componentProps: {
        allowClear: true,
      },
    },
    {
      field: 'billCode',
      component: 'Input',
      label: '账单批次号',
      componentProps: {
        allowClear: true,
      },
    },
    {
      field: 'startTime',
      component: 'DatePicker',
      label: '开始时间',
      wrapperColStyle: { width: '100%' },
      componentProps: {
        clearable: true,
      },
    },
    {
      field: 'endTime',
      component: 'DatePicker',
      label: '结束时间',
      wrapperColStyle: { width: '100%' },
      componentProps: {
        clearable: true,
      },
    },
  ];

  const columns: BasicColumn[] = [
    {
      title: '序号',
      slotName: 'index',
      width: 70,
    },
    {
      title: '账单批次号',
      dataIndex: 'billCode',
      width: 200,
    },
    {
      title: '账单类型',
      slotName: 'billType',
      width: 200,
    },
    {
      title: '上传账号',
      dataIndex: 'userName',
      width: 200,
    },
    {
      title: '状态',
      slotName: 'isHide',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '上传时间',
      dataIndex: 'createDate',
      width: 120,
    },
    {
      title: '操作',
      width: 120,
      slotName: 'actions',
      fixed: 'right',
    },
  ];

  const actionRef = ref();
  const [register, {}] = useForm({
    labelColProps: {
      span: 6,
    },
    wrapperColProps: {
      span: 18,
    },
    labelWidth: 90,
    layout: 'inline',
    rowProps: { gutter: [8, 8] },
    colProps: {
      xs: 24,
      sm: 24,
      md: 12,
      lg: 8,
      xl: 6,
    },
    schemas,
  });

  const loadDataTable = async (res) => {
    const { pageSize, page } = res;
    const response = await getHistoryBillList({ ...res, pageSize: pageSize, pageNum: page });
    return {
      totalCount: response.totalCount,
      list: response.list,
    };
  };

  function handleSubmit(values: Recordable) {
    if (values) {
      actionRef.value.reload(values);
    }
  }
  function downloadBillHandle(row) {
    downloadBill(row).then((res) => {
      downloadByData(res.data, `账单${row.billCode}.xlsx`);
    });
  }

  const visible = ref(false);
  const handleCancel = () => {
    visible.value = false;
  };
  function hideHandle(row) {
    visible.value = true;
    hideBillItem({
      billCode: row.billCode,
      billType: row.billType,
      hide: row.isHide == -1 ? 1 : -1,
    }).then(() => {
      actionRef.value.reload();
    });
  }
</script>

<style lang="less" scoped>
  /deep/ .arco-picker {
    width: 100% !important;
  }
</style>
